﻿<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style>
        #canvas,#zoom{
            left: 0;
            top: 0;
            position: absolute;
        }
        #canvas{
            opacity: 0;
            z-index: 1;
        }
    </style>
</head>
<body>
    <canvas id="canvas" width="1200" height="768"></canvas>
    <canvas id="zoom" width="1200" height="768"></canvas>
	<script type="text/javascript">
		var img = new Image();
        img.src = '';
        img.onload = function() {
            draw(this);
        };
        function draw(img) {
            var canvas = document.getElementById('canvas');
            var ctx = canvas.getContext('2d');
            ctx.drawImage(img, 0, 0);
            img.style.display = 'none';
            var zoom = document.getElementById('zoom')
            var zoomctx = zoom.getContext('2d');
            zoom.style.background = '#9a9898'
            zoomctx.font = "48px serif";
            zoomctx.fillStyle = "red";
            zoomctx.fillText("擎信宅男们有美女哦。。。", 300, 400)
            zoomctx.imageSmoothingEnabled = this.checked;
            zoomctx.mozImageSmoothingEnabled = this.checked;
            zoomctx.webkitImageSmoothingEnabled = this.checked;
            zoomctx.msImageSmoothingEnabled = this.checked;
            var zoom = function(event) {
                var x = event.layerX;
                var y = event.layerY;
                zoomctx.drawImage(canvas,
                    Math.abs(x - 5),
                    Math.abs(y - 5),
                    20, 20,
                    Math.abs(x - 5), 
                    Math.abs(y - 5),
                    20, 20);
            };
            canvas.addEventListener('mousemove', zoom);
        }
	</script>
</body>
</html>